<template>
  <div class="g-clickable shape" :class="{ active: active }" @click="change">
    <i :class="`${value}`"></i>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "circle",
    },
  },
  methods: {
    change() {
      this.$emit("change", this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.shape {
  width: 40px;
  height: 40px;
  margin-right: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  &.active {
    i {
      background-color: #6967fe;
    }
  }

  i {
    width: 24px;
    height: 24px;
    background-color: #a4b2c1;
    &.circle {
      border-radius: 12px;
    }
    &.square {
      border-radius: 0;
    }
    &.squircle {
      border-radius: 6px;
    }
  }
}
</style>
